import { memo, useEffect } from "react"
import { useAppDispatch } from "@/store"
import {
  fetchBannerDataAction,
  fetchHotRecommendAction,
  fetchNewAlbumsAction,
  fetchRankingDataAction,
  fetchSettleSingerAction
} from "@/store/features/recommend"
import Banner from "./cpns/banner"
import HotRecommend from "./cpns/hot-recommend"
import NewAlbum from "./cpns/new-album"
import TopRanking from "./cpns/top-ranking"
import UserLogin from "./cpns/user-login"
import { RecommendWrapper } from "./style"
import SettleSinger from "./cpns/settle-singer"
import HotAnchor from "./cpns/hot-anchor"
import type { ReactNode, FC } from "react"

interface IProps {
  children?: ReactNode
}

const Recommend: FC<IProps> = () => {
  const dispatch = useAppDispatch()

  useEffect(() => {
    dispatch(fetchBannerDataAction())
    dispatch(fetchHotRecommendAction())
    dispatch(fetchNewAlbumsAction())
    dispatch(fetchRankingDataAction())
    dispatch(fetchSettleSingerAction())
  }, [])

  return (
    <RecommendWrapper>
      <Banner />
      <div className="content wrap-v2">
        <div className="left">
          <HotRecommend />
          <NewAlbum />
          <TopRanking />
        </div>
        <div className="right">
          <UserLogin />
          <SettleSinger />
          <HotAnchor />
        </div>
      </div>
    </RecommendWrapper>
  )
}

export default memo(Recommend)
